<template>
	<view>
		<view class="detail webkit">
			<view class="flex inner">
				<view class="subtitle" v-cloak>{{res.total}}</view>
				<view class="title">累计奖金</view>
			</view>
			<view class="angle mid">
				<button type="primary">提现明细</button>
			</view>
		</view>
		<view class="group">
			<view class="list webkit">
				<image src="../../static/order0.png" mode=""></image>
				<text class="flex">可提现奖金</text>
				<text v-cloak>{{res.ktx}}</text>
			</view>
		</view>
		<view class="group">
			<view class="list webkit">
				<image src="../../static/order0.png" mode=""></image>
				<text class="flex">已申请奖金</text>
				<text v-cloak>{{res.ysq}}</text>
			</view>
			<view class="list webkit">
				<image src="../../static/order0.png" mode=""></image>
				<text class="flex">待打款奖金</text>
				<text v-cloak>{{res.ddk}}</text>
			</view>
			<view class="list webkit">
				<image src="../../static/order0.png" mode=""></image>
				<text class="flex">成功提现奖金</text>
				<text>{{res.ytx}}</text>
			</view>
			<view class="list webkit">
				<image src="../../static/order0.png" mode=""></image>
				<text class="flex">无效奖金</text>
				<text v-cloak>{{res.wux}}</text>
			</view>
		</view>
		<view class="expanded" :class="active" @click="detail">
			<view class="head webkit">
				<text class="flex">用户须知</text>
				<view class="remark"></view>
			</view>
			<view class="cont">
				<view class="text" v-if="id == 0">
					每次提现需要扣除手续费<text v-cloak>{{res.withdrawcharge}}%</text>
				</view>
				<view class="text" v-else v-cloak>
					每次提现需要扣除手续费<text>{{res.withdrawcharge}}</text>个{{res.coinname}}
				</view>
			</view>
		</view>
		<button :disabled="disabled" style="position:fixed;bottom:0;width:100%;font-size:14px;height:45px;line-height:45px;" type="warn" @click="jump">我要提现</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				res:[],
				active:"active",
				openid:'',
				disabled:false,
				id:' '
			};
		},
		onLoad:function(e){
			this.id = e.id
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				uni.request({
					url: 'http://m.wpweipin.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=commission.mingxi&app=1&id='+this.id,
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						uni.setNavigationBarTitle({
							title: '分享币种：'+res.data.coinname
						})
						if(res.data.istx == 0){
							this.disabled = true
						}
						this.res = res.data
					},
					fail: () => {},
					complete: () => {}
				});
			},
			detail(){
				if(this.active == 'active'){
					this.active = ''
				}else{
					this.active = 'active'
				}
			},
			jump(){
				uni.navigateTo({
					url: 'tixian/tixian?id='+this.id
				});
			}
		}
	}
</script>

<style>.detail{height:auto;color:#fff;padding:48upx 20upx;background:#fea23d;}.inner .subtitle{font-size:60upx;line-height:90upx;padding-left:20upx;}.inner .title{padding-left:20upx;}.angle button{height:48upx;width:auto;padding:0 16upx;border:2upx solid #fff;line-height:48upx;border-radius:24upx;font-size:28upx;float:right;background:transparent;color:inherit;}.group{margin-top:20upx;}.list{padding:20upx 24upx;background:#fff;position:relative;}.list:before{content:" ";position:absolute;left:20upx;right:20upx;bottom:-2upx;height:2upx;border-top:2upx solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);}.list image{width:36upx;height:36upx;position:relative;top:8upx;margin-right:16upx;}.expanded{background:#fff;margin-top:20upx;}.expanded .head{padding:20upx 24upx;}.expanded .remark:before{content:" ";display:inline-block;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);height:16upx;width:16upx;border-width:2upx 2upx 0 0;border-color:#C8C8CD;border-style:solid;position:relative;top:0px;right:10upx;}.expanded .cont{padding:20upx;position:relative;display:none;}.expanded .cont:after{content:" ";position:absolute;left:20upx;right:20upx;top:0;height:2upx;border-top:2upx solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);}.expanded .cont text{color:#ff741d;}.expanded .cont .text{font-size:26upx;color:#666;}.expanded.active .remark:before{-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);}.expanded.active .cont{display:block;}</style>